<template>
  <div class="login-container">
    <div class="title-box">
      <img class="logo" src="~@/assets/images/1logo@2x.png" alt="" />
      <div class="title">校园租凭系统</div>
      <img class="advertisement" src="~@/assets/images/1广告语@2x.png" alt="" />
    </div>
    <div class="content">
      <div class="title">账户密码登录</div>
      <van-form @submit="onSubmit">
        <van-field
          v-if="!isphone"
          v-model="form.username"
          name="username"
          label="登录账号"
          placeholder="请输入登录账号"
          clearable
          :rules="[{ required: true, message: '请输入登录账号' }]"
        >
          <template #right-icon>
            <img src="~@/assets/images/1账号@2x.png" />
          </template>
        </van-field>
        <van-field
          v-model="form.password"
          :type="passwordType"
          name="password"
          label="登录密码"
          placeholder="请输入登录密码"
          :rules="[{ required: true, message: '请输入登录密码' }]"
        >
          <template #right-icon>
            <img src="~@/assets/images/1密码@2x.png" />
          </template>
          <template #button>
            <span @click="switchPasswordType">
              <img
                v-if="passwordType === 'password'"
                src="~@/assets/images/1不可见@2x.png"
              />
              <img v-else src="~@/assets/images/1可见@2x.png" />
            </span>
          </template>
        </van-field>

        <div class="btn-box">
          <van-button
            round
            block
            :color="isdisplay ? '#13C093' : '#ccc'"
            native-type="submit"
            >登录</van-button
          >
        </div>
      </van-form>
    </div>
    <div class="footer-box">
      如需申请新账号或者重置登录密码，请前往PC端进行操作。
    </div>
  </div>
</template>

<script>
import { login } from "@/api/user";
import Tools from "@/tools/utils";
export default {
  name: "Login",
  data() {
    return {
      form: {
        username: "",
        password: ""
      },
      isdisplay: false,
      passwordType: "password"
    };
  },
  watch: {
    form: {
      handler(newold, oldval) {
        this.changedisplay();
      },
      deep: true,
      immediate: true
    }
  },
  beforeCreate() {},
  created() {},
  mounted() {},
  methods: {
    onSubmit(values) {
      if (!this.isdisplay) {
        return;
      }

      login({
        password: this.form.password,
        name: this.form.username
      })
        .then(res => {
          localStorage.setItem("userData", JSON.stringify(res.data[0]));
          this.$router.push("/me");
        })
        .catch(() => {
          this.$toast("登录失败");
        });
    },
    changedisplay() {
      if (this.form.username && this.form.password) {
        this.isdisplay = true;
      } else {
        this.isdisplay = false;
      }
    },
    switchPasswordType() {
      this.passwordType =
        this.passwordType === "password" ? "text" : "password";
    }
  }
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
